<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>重力促销活动</BreadcrumbItem>
      <BreadcrumbItem>创建促销</BreadcrumbItem>
    </Breadcrumb>
    <div class="form_box">
      <Form ref="formCustom" style="width: 1000px;" :model="form" :label-width="100">
        <FormItem label="活动名称:">
          <Input type="text"  style="width:500px;" placeholder="请输活动名称"></Input>
        </FormItem>
        <FormItem label="活动类型">
          <p>设备限时折扣</p>
        </FormItem>
        <FormItem label=" 开始时间:">
          <DatePicker
            type="datetime"
            :transfer="true"
            placement="bottom-end"
            placeholder="请选择开始-结束时间"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem label="结束时间: ">
          <DatePicker
            type="datetime"
            :transfer="true"
            placement="bottom-end"
            placeholder="请选择开始-结束时间"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem label="重复周期: ">
          <CheckboxGroup v-model="fruit">
            <Checkbox label="周一"></Checkbox>
            <Checkbox label="周二"></Checkbox>
            <Checkbox label="周三"></Checkbox>
            <Checkbox label="周四"></Checkbox>
            <Checkbox label="周五"></Checkbox>
            <Checkbox label="周六"></Checkbox>
            <Checkbox label="周日"></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="折扣时间及打折设置: ">
          <TimePicker format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
          <InputNumber :max="10" :min="1" v-model="value1"></InputNumber><span>折</span>&nbsp;&nbsp;
          <span>备注：0折为免费送，10折为商品原价，如输入9.9表示商品打9.9折，支持0-10之间的小数；</span>
        </FormItem>
        <FormItem label="参与活动设备: ">
         <Select  placeholder="请选择" style="width: 120px;"  >
          <Option value="0">所有门店</Option>
          <Option value="1">ijooz</Option>
        </Select>
          <div style="margin-top: 30px;margin-left: 100px;">
            <!--        此处进行双选框的添加-->
            <Transfer
              :data="data3"
              :target-keys="targetKeys3"
              :list-style="listStyle"
              :render-format="render3"
              :operations="['移出','移入']"
              :titles="['待选设备','已选设备']"
              filter-placeholder="请输入设备名称"
              filterable
              @on-change="handleChange3">
            </Transfer>

          </div>
        </FormItem>
        <FormItem label="活动图片:">
          <Upload action="//jsonplaceholder.typicode.com/posts/">
            <Button icon="ios-cloud-upload-outline">上传图片</Button>
          </Upload>
        </FormItem>
        <FormItem label="备注:">
          <Input type="text"  style="width:500px;"></Input>
<!--          <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" style="margin-left: 40px;margin-top: -50px;"></Input>-->
        </FormItem>
        <FormItem>
          <Button type="primary" @click="Submit">确定</Button>
          <!--          <Button type="default" @click="$router.go('-1')">取消</Button>-->
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value1: 1,
        fruit: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        formItem: {
          // radio2: 'allshop'
          // textarea: ''
        },
        //transfer穿梭框中数据内容的定义
        data3: this.getMockData(),
        targetKeys3: this.getTargetKeys(),
        listStyle: {
          width: '250px',
          height: '330px'
        },
        form: {
          username:'',
          password:'',
          role_id:null,
          manager_id:null,//经理id 经理角色账号时 不填
          email:'',//邮箱
        },
        selectData: null, // 权限组选中下标
        selectList: [], //权限预览id
        show: true,
        list_: [],
        list: [],
        roleList: [],

        checkAll: true,
        role_id: null,
        data: [],
        accountList: [],
        my_role_id: null, //6经理
      };
    },
    created() {
      // this.m_id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id

      this.my_role_id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;
      console.log(this.my_role_id)
      this.getlist();
      this.all();
      this.getAccount();
    },
    methods: {
      // transfer（穿梭框）中的方法
      getMockData () {
        let mockData = [];
        for (let i = 1; i <= 20; i++) {
          mockData.push({
            key: i.toString(),
            label: 'Content ' + i,
            description: 'The desc of content  ' + i,
            disabled: Math.random() * 3 < 1
          });
        }
        return mockData;
      },
      getTargetKeys () {
        return this.getMockData()
          .filter(() => Math.random() * 2 > 1)
          .map(item => item.key);
      },
      handleChange3 (newTargetKeys) {
        this.targetKeys3 = newTargetKeys;
      },
      render3 (item) {
        return item.label + ' - ' + item.description;
      },

      getAccount(){ //获取所有经理
        this.axios.post("device/getAccount").then(res => {
          if (res.code == 1) {
            this.accountList = res.data;
          }
        });
      },
      all() {
        this.axios.post("role/rule_list").then(res => {
          if (res.code == 1) {
            var arr = res.data;
            this.data = arr;

          }
        });
      },

      Submit() {
        var form = this.form;
        form.role_id = this.role_id
        // var id =  JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;

        // if(id == 6){
        // 	//经理不需要写经理id
        // }else{
        // 	// form.manager_id = id;
        // }

        // if(!this.$testEmail(form.email)){
        // 	this.$Message.warning('请填写正确的邮箱');
        // 	return false
        // }


        console.log(form)

        this.axios.post('account/addAccount',form ).then(res => {
          if(res.code == 1){
            this.$Message.success('添加成功');
            this.$router.go(-1)
          }
        })

      },

      getlist() {

        //如果是经理只能添加操作员

        this.axios.post("role/role_list",{status:1}).then(res => {
          if (res.code == 1) {
            if(this.my_role_id == 6){
              this.role_id = 7;
              this.list =[];

              var arr = res.data.list;

              for(var i = 0,len=arr.length;i<len;i++){
                if(arr[i].id == 7){
                  this.list .push(arr[i]);
                  break
                }
              }
            }else{
              this.list = res.data.list;
              this.role_id =this.list[0].id;
              console.log(this.selectData )

            }

            this.selectData = this.list[0].id;


            this.getRole();
          }
        });
      },

      getRole(){
        this.axios.post("role/get_role_rule",{role_id:this.role_id}).then(res => {
          if(res.code == 1){
            this.list_  = res.data;
            console.log(this.list_)
          }
        })
      },
      changeSelect(e) {
        console.log('选择', e)
        this.show = false;
        this.$nextTick(() => {
          this.show = true
        })
        this.role_id = e;
        this.getRole();
      },



    }

  };
</script>

<style scoped>
  h3 {
    line-height: 50px;
  }

  .subordinate {
    margin: 10px 20px;
  }

  .checkbox {
    margin: 5px 10px;
    min-width: 200px;
  }

  .check {
    margin-top: 5px;
    margin-left: 30px;
    min-width: 160px;
  }

  .checkboxs {
    border-bottom: 1px solid silver;
    padding-bottom: 10px;
  }

  .outer {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid silver;
    border-radius: 5px;
  }
</style>
